<template>
	<Navbar bgColor="#ffffff" :top="16" page-name="购物袋"
		:page-desc=" cartStore.Empty ? '暂未选购商品' : `共 ${cartStore.TotalCount} 件商品`" :back="false">
		<template #area>
			<view class="checkbox-group-box">
				<up-checkbox-group placement="column">
					<block v-if="!cartStore.Empty" v-for="(goods,index) in cartStore.cartList" :key="goods.id">
						<CartItem :goods="goods" :index="index" @checkChange="checkChange" />
					</block>
					<EmptyData v-else title="您的购物袋为空" text="优选商品，快去选购吧"></EmptyData>
				</up-checkbox-group>
			</view>
		</template>
	</Navbar>
	<view class="bottom-tool-box" v-if="!cartStore.Empty">
		<view class="u-flex u-flex-items-center">
			<up-checkbox :checked="cartStore.Checked" @change="cartStore.ToggleChecked(!cartStore.Checked)"
				inactiveColor="#000" usedAlone activeColor="#000 " label="全选" labelSize="14" labelColor="#000"
				:customStyle="{marginRight: '12px'}"></up-checkbox>
			<text class="f-s-12 u-info" v-if="cartStore.CheckedCount > 0">共 {{ cartStore.CheckedCount }} 件</text>
		</view>
		<view class="u-flex u-flex-items-center">
			<u-text v-if="cartStore.CheckedCount > 0" mode="price" color="#000" bold size="14"
				:text="cartStore.TotalPrice"></u-text>
			<up-button v-if="cartStore.CheckedCount > 0" text="立即结算" :customStyle="{
					width: '100px',
					height: '80rpx',
					backgroundColor: '#000',
					borderRadius: '40rpx',
					color: '#fff',
					fontSize: '28rpx',
					marginLeft: '12px'
			}" @click="settle"></up-button>
			<up-button v-else text="立即结算" :customStyle="{
					width: '100px',
					height: '80rpx',
					backgroundColor: '#DDDDDD',
					borderRadius: '40rpx',
					color: '#fff',
					fontSize: '28rpx',
					marginLeft: '12px'
			}"></up-button>
		</view>

	</view>

</template>

<script setup>
	import Navbar from '@/components/Navbar.vue';
	import CartItem from '@/components/CartItem.vue';
	import EmptyData from '@/components/EmptyData.vue'
	import Utils from '@/utils/common.js'
	import {
		PinaCartStore
	} from '@/store/cart.js'
	import {
		getToken
	} from '@/utils/auth'
	import {
		onShow
	} from '@dcloudio/uni-app'

	const cartStore = PinaCartStore();

	const checkChange = (e) => {
		cartStore.ToggleItemChecked(e.id)
	}

	/**
	 * 结算
	 */
	const settle = () => {
		uni.navigateTo({
			url: '/subPackages/order/settle'
		})
	}
</script>

<style scoped lang="scss">
	.checkbox-group-box {
		padding-bottom: 80px;
	}

	.bottom-tool-box {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 12px 26px;
		box-sizing: content-box;
		width: calc(100vw - 52px);
		border-top: 1rpx solid #DEDEDE;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		z-index: 1000;
	}

	::v-deep .u-checkbox__icon-wrap {
		margin-right: 12px !important;
		border-width: 2px !important;
	}

	::v-deep .u-checkbox__label-wrap {
		font-weight: bold !important;
	}
</style>